<template>
	<view class="home">
		<view class="home-scroll">
			<view class="home-content">
				<view class="home-content_title u-flex u-row-between">
					<view class="content-title_label u-flex">
						<image class="content-title_label--icon" src="/static/images/home/icon-shequ.png"
							mode="scaleToFill" />
						<text class="content-title_label--text">{{ $t('home.my_collection_post') }}({{topics.length}})</text>
					</view>
				</view>
				<view v-if="JSON.parse(JSON.stringify(topics)).length > 0">
					<template v-for="(item, index) in topics" :key="index">
						<article-item :item="item" :index="index" :type="'images'" @getList="getList" @resetList="resetList" @favorite="actCollect">
						</article-item>
					</template>
				</view>
				<view class="empty-cnt" v-else>
					<u-empty :text="$t('home.empty_txt')" mode="list"></u-empty>
				</view>
			</view>
		</view>
		<view class="fixed-publish" @click="goPublish">
			<u-image width="84rpx" height="84rpx" src="@/static/images/issue.png" mode=""></u-image>
		</view>
		<view class="backTop" v-show="$store.state.scrollValue >= 550" @click="backTop">
			回到顶部<i class="icon icon-shousuoshangjiantou u-font-24 u-m-l-5"></i>
		</view>
	</view>
</template>

<script>
	//极光推送
	// let jpushModule = uni.requireNativePlugin("JG-JPush")
	import articleItem from "@/components/article-item/index.vue";
	import pageMixin from '@/utils/pageMixin';
	export default {
		mixins: [pageMixin],
		data() {
			return {
				list: [],
				topics: [],
				query: {
					type: 1,
					idx: 1,
					size: 10
				},
				showPsdModal: true
			}
		},

		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t('mine.collection_list')
			});
		},
		onShow() {
			this.loadStatus = 'loading';
			this.getList();
			uni.setNavigationBarTitle({
				title: this.$t('mine.collection_list')
			});
		//	this.initJG();
		},
		components: {
			articleItem
		},
		computed: {
			i18n() {
				return this.$t('home')
			}
		},
		methods: {
			getList() {
				const uid = uni.getStorageSync('userInfo').uid
				this.$http.get('/bbs/topic/favorite/pager/data', {type: 1,mine:1,userid:uid}).then(res => {	
					this.topics = res;
						console.log(res)
				})
			},
			goSearch() {
				this.$u.route({
					url: '/pages/article/index'
				})
			},
			goArticle() {
				this.$u.route({
					url: '/pages/article/index'
				})
			},
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
				this.$store.commit('updateScrollValue', 0)
			},
			actCollect(res,index) {
				console.log(index)
				this.topics[index].IsFavorite = res.stat
				this.topics[index].Favorites = res.favorites
			}
		},
	}
</script>

<style lang="scss" scoped>
	/* #ifdef APP-PLUS */
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 999;
	}

	/* #endif */
	.home {

		// height: 100vh;
		// overflow: hidden;
		&-scroll {
			// height: 100vh;
		}

		&-content {
			padding-bottom: 4rpx;
		}
	}
  .psdModal {
		position: fixed;
		top: 0;
		right: 0;
		width: 60%;
		z-index: 10000;
		background-color: #fff;
		padding: 50rpx;
		box-shadow: 3rpx 3rpx 3rpx #f1f1f1;
	}
	.empty-cnt {
		background-color: #fff;

		.u-empty {
			padding: 100rpx 0;
		}
	}

	.home-header {
		background-color: #fff;
		margin-bottom: 20rpx;

		&_top {
			position: relative;
			overflow: hidden;
		}

		&_search {
			width: 100%;
			position: fixed;
			left: 0;
			top: 0;
			color: #ffffff;
			padding: calc(20rpx + var(--status-bar-height)) 20rpx 20rpx;
			background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 80%) ;
			z-index: 99;
			transition: all ease-in .3s;
		}

		.header-search_left {
			line-height: 1;

			.search-left_province {
				margin-bottom: 12rpx;

				&--text {
					margin-right: 8rpx;
				}

				.icon-arrow-b {
					font-size: 26rpx;
				}
			}

			.search-left_weather {
				color: #F0F0F0;
				font-size: 20rpx;
			}
		}

		.header-search_content {
			height: 60rpx;
			padding: 0 28rpx;
			background-color: #ffffff;
			border-radius: 4rpx;
			margin: 0 20rpx;

			.search-content_text {
				color: #666666;
				margin-left: 9rpx;
			}
		}

		.header-search_right {
			font-size: 28rpx;
		}

		&_bottom {
			width: 1040rpx;
			height: 200rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: -170rpx;
			background-color: #fff;
			border-radius: 50%;
		}
	}

	.home-header_handle {
		height: 134rpx;

		.header-handle_item--image {
			width: 60rpx;
			height: 60rpx;
			position: relative;
		}
	}

	.home-content_title {
		height: 93rpx;
		background-color: #fff;
		padding: 0 30rpx;

		.content-title_label--icon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 15rpx;
		}

		.content-title_label--text {
			font-size: 36rpx;
			color: #292927;
		}

		.content-title_right--text {
			color: #666666;
			margin-right: 6rpx;
		}

		.icon-arrow-r {
			font-size: 24rpx;
		}
	}

	.fixed-publish {
		z-index: 9999;
		position: fixed;
		right: 4rpx;
		bottom: 200rpx;
	}

	.backTop {
		background-color: #fff;
		color: #2A8CFF;
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		font-weight: 700;
		font-size: 24rpx;
		padding: 5rpx 16rpx;
		border-radius: 8rpx;
	}
</style>